<template>
    <div>
        <header class="mui-bar mui-bar-nav">
            <img src="login/1.png" @click="fun">
            <h1 class="mui-title">客服中心</h1>
        </header>
        <Service/>
        <div class="question">
            <div class="first">
                <h3>常见问题</h3><input type="text" placeholder="请输入想查找的问题">
            </div>
            <div class="title">
                <router-link to="/helpfirst"><span>猜你想问</span> </router-link>
                <router-link to="/helpsecond"><span>新人指南</span> </router-link>
                <router-link to="/helpthird"><span>优惠活动</span> </router-link>
                <router-link to="/helpfourth"><span>门店类</span> </router-link>
                <router-link to="/helpfifth"><span>购买类</span> </router-link>
                <router-link to="/helpsixth"><span>发票类</span> </router-link>
            </div>
            <router-view></router-view>
            <p class="show">资质公示&nbsp;|&nbsp;隐私权政策&nbsp;|&nbsp;用户协议&nbsp;|&nbsp;关于我们&nbsp;|&nbsp;付费会员服务协议</p>
        </div>
        <div class="bottom">
            <button @click="beforeClose()">客服热线</button><button>联系客服</button>
        </div>
    </div>
</template>

<script>
import Service from "@c/my/help/service.vue"
import { Dialog } from 'vant';

// Dialog({ message: '提示' });
export default {
    components:{
        Service
    },
    methods:{
        fun(){
            this.$router.push("/Twoa")
        },

        beforeClose() {
            Dialog.confirm({
                message: '4000100100',
                }).then(() => {
                    
                }).catch(() => {
                    
            });
                        
        }

    }

}
</script>

<style scoped>
    header{
        display: flex;
        height: 0.55rem;
        font-size: 0.16rem;
        width: 3.7rem;
        background-color: #f5f5f5;
        padding: 0.12rem 0;
        text-align: center;
        font-weight: normal;
    }
    header img{
        height: 0.34rem;
        position: absolute;
    }
    header h1{
        font-size: 0.16rem;
        line-height: 0.34rem;
        margin: auto;
        font-weight: 700;
        height: 0.34rem;
        display: inline;
    }
    .question{
        width: 3.56rem;
        height: 3.35rem;
        margin: auto;
        background-color: white;
        border-radius: 0.1rem;
        margin-top: 0.1rem;
    }
    .question .first{
        display: flex;
        position: relative;
    }
    .question h3{
        font-size: 0.14rem;
        line-height: 0.5rem;
        text-indent: 0.15rem;
        display: block;
    }
    .question input{
        width: 1.96rem;
        height: 0.34rem;
        border-radius: 0.05rem;
        background-color: #f5f5f5;
        border: none;
        outline: none;
        margin-top: 0.1rem;
        position: absolute;
        right: 0;
        text-indent: 0.1rem;
        margin-right: 0.15rem;
    }
    .question input::-webkit-input-placeholder{
        font-size: 0.12rem;
        color: #c2c2c2;
        text-indent: 0.1rem;
    }
    .router-link-active{
        width: 0.9rem;
        height: 0.28rem;
        color: #909fcc;
        border: 1px solid#909fcc;
        border-radius: 0.3rem;
        text-align: center;
        font-size: 0.12rem;
        line-height: 0.35rem;
        margin-left: 0.1rem;
        margin-right: 0.3rem;
    }
    .title{
        width: 3.56rem;
        height: 0.35rem;
        overflow-x: auto;
        line-height: 0.35rem;
        display: flex;
        margin-top: 0.1rem;
    }
    .title span{
        width: 0.7rem;
        height: 0.26rem;
        font-size: 0.12rem;
        flex: 1;
        /* border: 1px solid black; */
        margin: auto;
        line-height: 0.26rem;
        display: block;
        border: none;
        background-color: white;
        border-radius: 0.3rem;
        margin-left: 0.1rem;
        margin-right: 0.1rem;
    }
    .show{
        line-height: 0.4rem;
        text-indent: 0.1rem;
        font-size: 0.12rem;
        color:#bdbdbd;
    }
    .bottom{
        width: 100%;
        height: 0.58rem;
        display: flex;
        justify-content: center;
        background-color: white;
        position: absolute;
        bottom: 0;
    }
    .bottom button{
        width: 1.65rem;
        height: 0.39rem;
        background-color: #778ac1;
        border-radius: 0.3rem;
        border: none;
        outline: none;
        font-size: 0.14rem;
        color: white;
        text-align: center;
        margin: 0.1rem 0.07rem;
    }
</style>